<template>
    <div class="SellOrderDetail">
        <div class="container">
            <div class="f-row f-j-between f-a-center">
                <strong>出售单号 20190906898989</strong>
                <span class="time">2019-09-06 12:23:23</span>
<!--                <strong style="color: #E02020;">出售中</strong>-->
            </div>
            <div class="f-row f-j-between f-a-center">
                <div class="amount"><span>订单数量</span><strong class="DIN-Medium">2000</strong></div>
            </div>
            <div class="f-row f-j-between f-a-center">
                <div class="amount"><span>剩余数量</span><strong class="DIN-Medium">2000</strong></div>
                <div class="payTypes">
                    <gy-icon fontName="icon-zhifubao" style="color: #02A9F0;margin-right: 0.2rem;"></gy-icon>
                    <gy-icon fontName="icon-weixin1" style="color: #52BD33;margin-right: 0.2rem;"></gy-icon>
                    <gy-icon fontName="icon-yinhangqia" style="color:#118CE8;margin-right: 0.2rem;"></gy-icon>
                </div>
<!--                <div class="btn" style="background-color: #3B83FF;">确定释放</div>-->
            </div>
        </div>
        <sell-item/>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import GyIcon from "@/components/GyIcon.vue";
import SellItem from "@/views/order/component/SellItem.vue";
@Component({
    name: 'SellOrderDetail',
    components: {SellItem, GyIcon}
})
export default class extends Vue {
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: '返回', click: () => {
                    __this.$router.push('/order?type=1')
                }},
            rightItem: {name: '撤单', click: () => {
                    __this.$common.toast({
                        mes: '撤单'
                    })
                }}
        })
    }
}
</script>

<style scoped lang="less">
.SellOrderDetail {
    padding: 0.2rem 0.3rem;
    & .container {
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.2rem;
        margin-bottom: 0.2rem;
        & .f-row {
            padding: 0.2rem 0;
            & strong {
                font-size: 0.24rem;
            }
            & span {
                font-size: 0.24rem;
            }
            & .amount {
                & strong {
                    font-size: 0.36rem;
                    margin-left: 0.14rem;
                    color: #666666;
                }
                & span {
                    color: #999999;
                }
            }
            & .btn {
                width: 1.9rem;
                height: 0.62rem;
                text-align: center;
                line-height: 0.62rem;
                font-size: 0.24rem;
                color: white;
                &:active {
                    opacity: 0.8;
                }
            }
        }
    }
}
</style>
